<template>
    <!-- 时间 -->
    <div class="time">
        <div class="head-portrait">
            <img v-if="$props.picUrl" :src="$props.picUrl" alt="">
            <img v-else src="../../assets/img/music.png" alt />
        </div>
        <div class="play-event" ref="playEvent" @mousedown="progress">
            <div class="currentPlay" :style="'width:' + playWidth">
                <div class="loading" @mousedown="currentProgress">
                    <div class="tag"></div>
                </div>
            </div>
        </div>
        <div class="show-time">
            <span>{{playTime.current}}</span>
            <span>/</span>
            <span>{{playTime.total}}</span>
        </div>
        <div class="song-name">
            <div class="name">{{song.name}}</div>
            <div class="singer">
                <template 
                    v-for="(item, index) of song.singer"
                    :key="index"
                >
                    <span v-if="index != 0">/</span>
                    <span>{{item.name}}</span>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, inject } from 'vue';
    const emitter = inject('emitter');

    const props = defineProps(['picUrl'])

    // 计算进度条
    const playTime = reactive({
        current: '00:00',
        total: '00:00'
    })
    let totalTime = 0;
    let audioElement;
    let oldValue;
    emitter.on('time', (audio) => {
        audioElement = audio;
        totalTime = audio.duration;
        playTime.total = calculationTime(totalTime);
        const totalWidth = playEvent.value.offsetWidth;
        audio.ontimeupdate = function () {
            if(playWidthKey) { //进度条正在移动的时候不改变宽度
                playWidth.value = parseInt(this.currentTime / totalTime * totalWidth) + 'px';
            }
            playTime.current = calculationTime(this.currentTime);


            // 让歌曲播放事件对应歌词
            if(oldValue != parseInt(this.currentTime)) {
                emitter.emit('selectLyric', parseInt(this.currentTime));
            }
            oldValue = parseInt(this.currentTime);
        }
    })
    const calculationTime = (time) => {
        time = (time / 60).toString();
        time = time.split('.');
        let fen = time[0];
                
        let miao = parseInt(Number('0.' + time[1]) * 60).toString();
        if(miao === 'NaN') {
            miao = '00'
        }
        if (fen.length === 1) {
            fen = 0 + fen;
        }
        if (miao.length === 1) {
            miao = 0 + miao;
        }
        return `${fen}:${miao}`;
    }


    // 歌名以及歌词
    const song = reactive({
        name: '',
        singer: ''
    })
    emitter.on('songInformation', ({songName, singer}) => {
        song.name = songName;
        song.singer = singer;
    }) 


    // 计算进度条距离屏幕的距离
    const playEvent = ref();
    const playWidth = ref('0px');

    emitter.on('initWidth', () => {
        playWidth.value = '0px';
    })

    const getScreenLeft = (obj) => {
        let count = obj.offsetLeft;
        while (obj.offsetParent != null) {
            obj = obj.offsetParent;
            count += obj.offsetLeft;
        }
        return count;
    }


    //计算当前宽度
    let audioCurrentTime;
    let playWidthKey = true;
    const getWidth = (e) => {
        e.stopPropagation();
        playWidthKey = false;
        const screenLeft = getScreenLeft(playEvent.value);
        let current;
        if (e.clientX - screenLeft <= 400 && e.clientX - screenLeft >= 0) {
            current = e.clientX - screenLeft
            playWidth.value = current + 'px';
            audioCurrentTime = parseInt(current / playEvent.value.offsetWidth * totalTime);
            emitter.emit('selectLyric', audioCurrentTime);
        }
    }


    const modifyProgressCurrentTime = () => {
        if(audioElement) {
            audioElement.currentTime = audioCurrentTime;
        }
    }

    const mouseupContext = () => {
        modifyProgressCurrentTime();
        playWidthKey = true;
        document.removeEventListener('mousemove', getWidth);
        document.removeEventListener('mouseup', mouseupContext);
    }

    const currentProgress = () => {  //拖拽进度条
        document.addEventListener('mousemove', getWidth);
        document.addEventListener('mouseup', mouseupContext)
    }
    //点击进度条
    const progress = (e) => {
        e.stopPropagation()
        getWidth(e);
        modifyProgressCurrentTime();
        playWidthKey = true;
    }
</script>

<style lang='less' scoped>
.time {
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .head-portrait {
        width: 35px;
        height: 35px;
        border-radius: 3px;
        user-select: none;
        img {
            border-radius: 3px;
            width: 100%;
            height: 100%;
            border: 1px solid rgb(80, 80, 80);
        }
    }

    .play-event {
        width: 400px;
        border-radius: 5px;
        height: 8px;
        background-color: rgb(97, 97, 97);
        transform: translateY(8px);
        .currentPlay {
            width: 0px;
            height: 100%;
            background-color: #c70c0c;
            border-radius: 5px;
            position: relative;
            .loading {
                position: absolute;
                right: -8px;
                top: 50%;
                transform: translateY(-50%);
                width: 16px;
                height: 16px;
                background-color: white;
                border-radius: 50%;
                .tag {
                    width: 50%;
                    height: 50%;
                    background-color: #c70c0c;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 50%;
                }
                &:hover {
                    box-shadow: 0 0 5px 1px white;
                }
            }
        }
    }

    .show-time {
        width: 70px;
        font-size: 12px;
        color: #ccc;
        transform: translateY(8px);
        user-select: none;
        span {
            &:nth-child(2) {
                margin: 0 3px;
                opacity: 0.5;
            }
            &:last-child {
                opacity: 0.5;
            }
        }
    }

    .song-name {
        position: absolute;
        top: 8px;
        left: 52px;
        font-size: 12px;
        color: #ccc;
        .name {
            margin-right: 10px;
            float: left;
        }
        .singer {
            .split {
                margin: 0 5px;
            }
            float: left;
        }
    }
}
</style>